<template>
  <el-dialog :visible.sync="visible" :title="$t('device.DeviceSetting')" :highlight-current-row="!multiple"
    width="800px">
    <el-table ref="table" :data="list" row-key="id">
      <el-table-column label="#" type="index" />
      <el-table-column :label="$t('Select')" prop="id" width="60">
        <template slot-scope="{row}">
          <el-checkbox v-model="row.checked" @change="handleCheck(row,$event)" />
        </template>
      </el-table-column>
      <el-table-column width="60">
        <template slot-scope="{row}">
          <img class="row-user-avatar" :src="avatar(row)" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('Name')" prop="name" min-width="100" />
      <el-table-column :label="$t('Code')" prop="code" min-width="120" />
      <el-table-column :label="$t('Username')" prop="username" min-width="120" />
      <el-table-column :label="$t('Category')" prop="type" width="80" />
    </el-table>
    <el-pagination :current-page="query.pageNo" :page-size="query.pageSize" :total="total" @page-change="queryList" />
    <div slot="footer">
      <el-button type="info" @click="visible = false">{{ $t('Close') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import deviceCardAPI from '@/api/device/card'
  import devicePermissionAPI from '@/api/device/permission'
  import {
    listToMap
  } from '@/utils'
  import settings from '@/settings'
  export default {
    name: 'DeviceCardSelect',
    data() {
      return {
        query: {
          code: null,
          name: null,
          pageSize: 10,
          pageNo: 1
        },
        total: 0,
        deviceChild: {},
        permissions: [],
        permissionMap: {}
      }
    },
    created() {},
    methods: {
      avatar(item) {
        return item.avatar ? `${settings.baseUrl}${item.avatar}` : require(`@/assets/images/none.png`)
      },
      requestList() {
        return deviceCardAPI.page()
      },
      listLoaded() {
        const list = this.list
        for (var i = 0; i < list.length; i++) {
          const item = list[i]
          this.$set(item, 'checked', false)
        }
      },
      queryOther() {
        this.loadPermission()
      },
      loadPermission() {
        const vm = this
        const {
          deviceId,
          index
        } = this.deviceChild
        devicePermissionAPI.list({
          deviceId,
          deviceIndex: index
        }).then(res => {
          vm.permissions = res.data
          vm.permissionMap = Object.assign({}, listToMap(res.data, 'key'))
          setTimeout(vm.setChecked, 200)
        })
      },
      setChecked() {
        const {
          list,
          permissionMap,
          multiple
        } = this
        for (var i = 0; i < list.length; i++) {
          if (permissionMap[list[i].code]) {
            list[i].checked = true
            if (!multiple) {
              return
            }
          }
        }
      },
      handleCheck(row, checked) {
        console.log(row, checked)
        const {
          deviceId,
          index
        } = this.deviceChild
        if (!checked) {
          devicePermissionAPI.deleteOne({
            deviceId,
            deviceIndex: index,
            type: 0,
            key: row.code
          })
          return
        }
        if (this.multiple) {
          devicePermissionAPI.create({
            deviceId,
            deviceIndex: index,
            type: 0,
            key: row.code,
            keyType: 0
          })
          return
        }
        const list = this.list
        for (var i = 0; i < list.length; i++) {
          const item = list[i]
          if (item.checked && item.code !== row.code) {
            item.checked = false
            break
          }
        }
        devicePermissionAPI.saveOne({
          deviceId,
          deviceIndex: index,
          type: 0,
          key: row.code,
          keyType: 0
        })
      }
    }
  }

</script>
